<template>
	<view>
		<view class="head-box">
			<view class="water-c">
				<view class="water-1"></view>
				<view class="water-2"></view>
				<view class="water-3"></view>
			</view>
			<view class="user-info u-flex">
				<view class="avatar">
					<image :src="imgUrl(vuex_user.avatar)" @click="getUserInfo"></image>
				</view>
				<view class="info u-flex-1">
					<view class="u-line-1" @click="getUserInfo">昵称：{{vuex_user.nickname || ''}}</view>
					<view class="u-line-1">电话：{{vuex_user.mobile || ''}}</view>
				</view>
			</view>
		</view>
		<view class="link-nav u-flex">
			<view class="item u-flex" @click="jump('/pages/mine/history')">
				<image src="/static/icon/nav-icon1.png"></image>
				<view>浏览记录</view>
			</view>
			<view class="item u-flex" @click="jump('/pages/mine/my-attention')">
				<image src="/static/icon/nav-icon2.png"></image>
				<view>我的关注</view>
			</view>
			<view class="item u-flex" @click="jump('/pages/mine/my-house')">
				<image src="/static/icon/nav-icon3.png"></image>
				<view>我的房子</view>
			</view>
			<view class="item u-flex" @click="jump_s('/pages/chat/chat')">
				<image src="/static/icon/nav-icon4.png"></image>
				<view>我的管家</view>
			</view>
		</view>
		
		<!-- 列表 -->
		<view class="link-list">
			
			<view class="item u-flex" v-if="vuex_user.is_agent === true" hover-class="link-list-item-hover" @click="jump('/pages/agent/index',!0)">
				<image src="/static/icon/jjr.png"></image>
				<view class="u-flex-1">经纪人中心</view>
				<text class="iconfont icon-jiantouyou"></text>
			</view>
			
			<view class="item u-flex" v-for="(item,index) in links" :key="index" hover-class="link-list-item-hover" @click="linksJump(index)">
				<image :src="`/static/icon/icon${index + 1}.png`"></image>
				<view class="u-flex-1">{{item}}</view>
				<text class="iconfont icon-jiantouyou"></text>
			</view>
		</view>
		
		<view class="out-login">
			<u-button type="primary" shape="circle" @click="outLogin">退出登录</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				links:['交易合同','我的交易','预约带看','带看记录','客服电话','用户协议','隐私政策','关于我们']
			}
		},
		methods:{
			linksJump(index){
				switch(index) {
					case 0://交易合同
						this.jump('/pages/mine/trade-contract')
						break;
					case 1://我的交易
						this.jump('/pages/mine/my-deal')
						break;
					case 2://预约带看
						this.jump('/pages/mine/belt-see')
						break;
					case 3://带看记录
						this.jump('/pages/mine/see-record')
						break;
						
					case 4://客服电话
						this.jump('/pages/mine/kefu')
						break;
					case 5:
					 this.$app.openXY(5)
					 break;
					case 6://隐私政策
					 this.$app.openXY(3)
					 break;
					case 7://关于我们
					 this.$app.openXY(7)
					 break;
				}
			},
			outLogin(){
				uni.showModal({
					content:'是否退出登录',
					success: (res) => {
						if(res.confirm){
							this.$u.vuex('token','')
							this.$u.vuex('vuex_user','')
							this.$app.jump('/pages/index/index',!0)
						}
					}
				})
			},
			getUserInfo(){
				uni.getUserProfile({
					desc:'更新用户信息',
					success: (res) => {
						this.$u.post('/api/user/profile',{
							avatar:res.userInfo.avatarUrl,
							nickname:res.userInfo.nickName
						}).then(res=>{
							this.$u.toast('更新成功')
							this.$store.dispatch('getUserInfo',this)
						})
					}
				})
			},
			jump_s(url){
				uni.switchTab({
					url
				})
			}
		},
		onLoad(){
			this.$store.dispatch('getUserInfo',this)
		}
	}
</script>

<style lang="scss">
	.head-box{height: 280rpx;background-color: $tc;position: relative;
		.user-info{position: relative;z-index: 1;padding: 60rpx 30rpx 0 66rpx;
			.avatar{width: 140rpx;height: 140rpx;
				image{display: block;width: 100%;height: 100%;border-radius: 50%;}
			}
			.info{
				margin-left: 40rpx;overflow: hidden;
				view{color: #fff;font-size: 32rpx;padding: 4rpx 0;word-break: break-all;}
			}
		}
	}
	.link-nav{
		border-bottom: 14rpx solid #f4f4f4;padding: 40rpx 30rpx;
		.item{width: 25%;justify-content: center;flex-direction: column;overflow: hidden;
			image{width: 130rpx;height: 130rpx;display: block;}
			view{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;text-align: center;
				font-size: 30rpx;font-weight: bold;color: #111;
			}
		}
	}
	
	// 底部链接
	.link-list{
		.item{border-bottom: 2rpx solid #ececec;height: 110rpx;padding: 0 40rpx 0 50rpx;
			image{display: block;width: 70rpx;height: 70rpx;}
			view{font-size: 30rpx;font-weight: bold;color: #111;margin-left: 18rpx;}
			.iconfont{color: #888;font-size: 40rpx;}
			//&:last-child{border-bottom: 0;}
		}
	}
	.link-list-item-hover{background-color: #f9f9f9;opacity: .9;}
	
	.out-login{padding: 40rpx;}
	
	// 顶部动画
	
	.water-c {
		position: absolute;
		left: 0;
		bottom: -30px;
		height: 80px;
		width: 100%;
		overflow: hidden;
		opacity:0.3;
	}
	
	.water-1 {
		background: url("") repeat-x;
		background-size: 800px;
		animation: wave-animation-1 3.5s infinite linear;
	}
	
	.water-2 {
		top: 20px;
		background: url("") repeat-x;
		background-size: 800px;
		animation: wave-animation-2 6s infinite linear;
	}
	
	.water-3 {
		background: url("") repeat-x;
		background-size: 800px;
		top: -20px;
		animation: wave-animation-1 6s infinite linear;
	}
	
	.water-1,
	.water-2,
	.water-3 {
		position: absolute;
		width: 100%;
		height: 80px;
		bottom: 0;
	}
	
	@keyframes wave-animation-1 {
		0% {
			background-position: 0 top
		}
	
		100% {
			background-position: 800px top
		}
	}
	
	@keyframes wave-animation-2 {
		0% {
			background-position: 0 top
		}
	
		100% {
			background-position: 800px top
		}
	}
</style>
